<template>
	<view>
		<view class="homebox">
			<view class="Navheaderheight">
				<!-- 导航栏 -->
				<address-nav-bar @blankaddress="toAddress" :title="locaDistrict"></address-nav-bar>
			</view>
			<view class="viewtext">
				<v-tabs v-model="current" :tabs="topnav" field="name" height="60rpx" @change="change" :pills="true"
					line-height="0" activeColor="#fff" pillsColor="#1bc078" pillsBorderRadius="30rpx"
					paddingItem="0 50rpx"></v-tabs>
			</view>
			<swiper class="main" :style="{height: height + 'px'}" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item v-for="i in 4" :key="i">
					<scroll-view class="scrollview" :scroll-y="true" :style="{height: height + 'px'}"
						@scrolltolower="orderScrolltolower">
						<view style="height: 30rpx "></view>
						<order :data="item" v-for="item in msg" :key="item.id" @closeS="closeShow"
							@_getRecoverList="_getRecoverList()" />
						<u-loadmore :status="status" :load-text="loadText" />
						<view class="scrollview-height"></view>
					</scroll-view>
				</swiper-item>
			</swiper>

			<!-- 遮挡层 -->
			<view v-if="isShow" @touchmove.stop.prevent>
				<view class="shodo" @click="showShow2"></view>
				<complete @closeMin="showShow" @closeMin2="showShow2" :data="dataItem"></complete>
			</view>
		</view>
	</view>
</template>

<script>
	import QQMapWX from "../../../requestApi/qqmap-wx-jssdk.min.js";
	import Order from './order/order'
	import Complete from './order/complete'

	export default {
		components: {
			Order,
			Complete
		},
		data() {
			return {
				isShow: false,
				current: 0,
				swiperCurrent: 0,
				height: 0,
				msg: [],
				// topnav: [{
				// 	name: '未接单',
				// 	id: 1,
				// }, {
				// 	name: '已接单',
				// 	id: 2,
				// }, {
				// 	name: '已完成',
				// 	id: 3,
				// }, {
				// 	name: '全部',
				// 	id: null,
				// }],
				
				topnav: [{
					name: '未接单',
					id: 1,
				}, {
					name: '已接单',
					id: 2,
				}, {
					name: '已完成',
					id: 3,
				}, {
					name: '全部',
					id: null,
				}],
				
				
				params: {
					page: 1,
					limit: 20,
					status: 1,
				},
				olPage: 1,
				dataItem: {},
				status: 'loading',
				loadText: {
					loadmore: '上拉加载更多',
					loading: '加载中...',
					nomore: '没有更多数据了'
				},
				//
				locaDistrict: '正在获取定位...'
			}
		},
		mounted() { 
			const query = uni.createSelectorQuery();
			query.in(this).select('.main').boundingClientRect();
			query.exec((res) => {
				this.height = uni.getSystemInfoSync().windowHeight - res[0].top - uni.upx2px(160);
			})
			this._getRecoverList();
			//
			this.getLocat();
		},
		methods: {
			// 订单导航栏点击改变样式
			change(index) {
				this.current = index
				this.swiperCurrent = index
			},
			transition({
				detail: {
					dx
				}
			}) {
				// this.$refs.tabs.setDx(dx)
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				// this.$refs.tabs.setFinishCurrent(current)
				this.swiperCurrent = current
				this.current = current
				this.params = {
					status: this.topnav[current].id,
					page: 1,
					limit: 20,
				}
				this.olPage = 1;
				this.msg = [];
				this._getRecoverList();
			},
			// 显示弹窗，隐藏TabBar
			closeShow(data) {
				this.$emit('showtabbar');
				this.dataItem = data;
				this.isShow = true;
			},
			// 关闭弹窗，显示TabBar
			showShow() {
				this.$emit('showtabbar')
				this.isShow = false;
				this.animationfinish({
					detail: {
						current: 2
					}
				});
			},
			showShow2() {
				this.$emit('showtabbar')
				this.isShow = false;
			},
			// 跳转至定位
			toAddress() {
				return;
				uni.navigateTo({
					url: 'address/address'
				})
			},
			orderScrolltolower() {
				this.params.page++;
				this._getRecoverList();
			},
			_getRecoverList() {
				let params = {};
				this.status = 'loading';
				if (this.params.status == null) {
					params = {
						page: this.params.page,
						limit: this.params.limit,
					}
				} else {
					params = this.params;
				}
				this.$u.api.getRecoverList(params).then(res => {
					// this.msg = res.list;
					if (this.params.page == 1) {
						this.status = 'nomore';
						this.msg = res.list;
					} else {
						if (res.list <= 0) {
							this.status = 'nomore';
							this.params.page = this.olPage;
							return;
						}
						this.olPage = this.params.page;
						this.msg = this.msg.concat(res.list);
					}
				}).catch(err => {

				})
			},
			//
			// 获取位置信息
			getLocat() {
				// 腾讯地图Api
				const qqmapsdk = new QQMapWX({
					key: getApp().globalData.qqmapsdkKey
				});
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: data => {
								this.locaDistrict = data.result.address_component.district
							},
						});
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	/* 标记完成背景 */
	.shodo {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100vh;
		background-color: #000000;
		opacity: 0.5;
		z-index: 998;
	}

	.homebox {
		// position: relative;
		background-color: #eee;
	}

	.viewtext {
		// position: fixed;
		// top: 166rpx;
		width: 100%;
		display: flex;
		justify-content: space-around;
		height: 80rpx;
		background-color: #ffffff;
		text-align: center;
		line-height: 60rpx;
		// z-index: 999999;
		// padding-top: 15rpx;
	}

	.viewtext text {
		width: 125rpx;
		height: 60rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		transition: all 0.3s;

		&.active {
			background-color: #1bc078;
			color: #fff;
		}
	}

	.scrollview {
		// margin-top: 88rpx;
	}

	.scrollview-height {
		height: calc(120rpx + env(safe-area-inset-bottom));
	}
</style>